<template>
  <view w-full box-border pa-20rpx>
    <view
      bg="#fff"
      rounded-20rpx
      w-full
      flex
      flex-col
      justify-center
      items-center
      box-border
      px-20rpx
      py-40rpx
      mb-10rpx>
      <view flex items-center mb-40rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/time.png"></image>
        <view text-36rpx font-bold text="#000">等待付款</view>
      </view>
      <view text="#D03939" text-48rpx font-bold mb-20rpx>
        <nut-countdown :endTime="endTime"></nut-countdown>
      </view>
      <view text="#7D7D7D" font-bold text-20rpx>请在规定时间内支付，超过支付时间将自动取消订单。</view>
    </view>
    <view w-full bg="#fff" rounded-20rpx box-border px-20rpx mb-10rpx>
      <view w-full h-90rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>订单编号</view>
        <view flex items-end>
          <view text-28rpx text="#7D7D7D" mr-20rpx>{{ result.orderNo }}</view>
          <image w-40rpx h-40rpx src="@/pages/ticket/static/copy.png" @click="setCopy(result.orderNo)"></image>
        </view>
      </view>
      <view w-full h-90rpx flex items-center justify-between text="#000" style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>下单时间</view>
        <view text-28rpx text="#7D7D7D">{{ result.createTime }}</view>
      </view>
      <view w-full h-110rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>应付金额</view>
        <view flex items-end text="#D03939" font-bold>
          <view mb-6rpx text-20rpx>¥</view>
          <view text-36rpx>{{ result.totalActualAmount }}</view>
        </view>
      </view>
    </view>
    <view w-full bg="#fff" rounded-20rpx box-border px-20rpx mb-10rpx flex>
      <view w-full h-90rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>支付方式</view>
        <view flex items-end>
          <view text-28rpx text="#7D7D7D" mr-20rpx>微信支付</view>
          <image w-40rpx h-40rpx src="@/pages/ticket/static/wechat.png"></image>
        </view>
      </view>
    </view>
  </view>
  <view position-fixed bottom-46rpx w-full z-999 px-40rpx box-border>
    <order-pay :orderId="result.orderId" :callBack="pay">
      <view
        w-670rpx
        h-100rpx
        rounded-50rpx
        bg="#FCC300"
        flex
        justify-center
        items-center
        font-500
        text="#000"
        text-32rpx>
        立即支付
      </view>
    </order-pay>
  </view>
</template>

<script setup lang="ts">
import { getMyTicketGoodsOrderDetail } from '@/api/ticketGoods'
import orderPay from './components/orderPay.vue'
import { onLoad } from '@dcloudio/uni-app'
import { setCopy } from '@/utils/tools'
const result = ref<any>({})

const orderId = ref('')
const endTime = ref()
function countdownEnd() {
  uni.redirectTo({
    url: '/pages/ticket/ticketOrderList'
  })
}
function init() {
  getMyTicketGoodsOrderDetail(orderId.value).then((res: any) => {
    result.value = res.data.result
    const date = new Date(result.value.createTime.replace(' ', 'T'))

    endTime.value = date.setMinutes(date.getMinutes() + 30)

    console.log(endTime.value)
  })
}
function pay(status: number | string) {
  uni.redirectTo({
    url: `/pages/ticket/payResult?status=${status}`
  })
}
onMounted(() => {})
onLoad((options: any) => {
  orderId.value = options.id
  init()
})
</script>
<style>
page {
  --nut-countdown-font-size: 48rpx;
}
</style>
<style scoped lang="scss"></style>
